<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<view class="header-top">
				<text class="back-btn" @click="goBack">←</text>
				<text class="page-title">充值管理</text>
				<text class="refresh-btn" @click="refreshData">🔄</text>
			</view>
			<text class="page-subtitle">处理学生充值申请</text>
		</view>

		<!-- 标签页切换 -->
		<view class="tab-container">
			<view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
				<text class="tab-text">待处理</text>
				<view v-if="pendingRecharges.length > 0" class="tab-badge">
					<text class="badge-text">{{ pendingRecharges.length }}</text>
				</view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'logs' }" @click="switchTab('logs')">
				<text class="tab-text">处理日志</text>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-cards" v-if="activeTab === 'pending'">
			<view class="stat-card">
				<view class="stat-icon pending-icon">
					<text class="icon-text">⏳</text>
				</view>
				<view class="stat-content">
					<text class="stat-number">{{ pendingRecharges.length }}</text>
					<text class="stat-label">待处理</text>
				</view>
			</view>
			<view class="stat-card">
				<view class="stat-icon amount-icon">
					<text class="icon-text">💰</text>
				</view>
				<view class="stat-content">
					<text class="stat-number">¥{{ totalPendingAmount }}</text>
					<text class="stat-label">待处理金额</text>
				</view>
			</view>
		</view>

		<!-- 处理日志统计卡片 -->
		<view class="stats-cards" v-if="activeTab === 'logs'">
			<view class="stat-card">
				<view class="stat-icon logs-icon">
					<text class="icon-text">📋</text>
				</view>
				<view class="stat-content">
					<text class="stat-number">{{ processLogs.length }}</text>
					<text class="stat-label">处理记录</text>
				</view>
			</view>
			<view class="stat-card">
				<view class="stat-icon total-icon">
					<text class="icon-text">📊</text>
				</view>
				<view class="stat-content">
					<text class="stat-number">{{ totalProcessedAmount }}</text>
					<text class="stat-label">已处理金额</text>
				</view>
			</view>
		</view>

		<!-- 待处理充值列表 -->
		<view class="recharge-list" v-if="activeTab === 'pending'">
			<view class="list-header">
				<text class="list-title">待处理充值申请</text>
				<text class="list-count">{{ pendingRecharges.length }}个申请</text>
			</view>

			<!-- 充值申请列表 -->
			<view v-if="!loading && pendingRecharges.length > 0">
				<view class="recharge-item" v-for="recharge in pendingRecharges" :key="recharge.userId">
					<view class="recharge-info">
						<view class="student-info">
							<view class="student-header">
								<text class="student-name">{{ recharge.studentName || '学生姓名' }}</text>
								<view class="amount-badge">
									<text class="amount-text">¥{{ recharge.totalAmount }}</text>
								</view>
							</view>
							<text class="student-phone">{{ recharge.studentPhone || '手机号' }}</text>
							<text class="recharge-time">最新申请时间: {{ formatTime(recharge.latestTime) }}</text>
							<text class="recharge-count">充值次数: {{ recharge.recordCount }}次</text>
							<text v-if="recharge.allNotes.length > 0" class="recharge-notes">备注: {{ recharge.allNotes.join(', ') }}</text>
						</view>
					</view>
					<view class="recharge-actions">
						<button class="action-btn process-btn" @click="processRecharge(recharge)">
							处理
						</button>
						<button class="action-btn detail-btn" @click="viewRechargeDetail(recharge)">
							详情
						</button>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view v-else-if="loading" class="loading-state">
				<view class="loading-icon">⏳</view>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 空状态 -->
			<view v-else class="empty-state">
				<view class="empty-icon">✅</view>
				<text class="empty-title">暂无待处理充值</text>
				<text class="empty-desc">所有充值申请已处理完成</text>
			</view>
		</view>

		<!-- 处理日志列表 -->
		<view class="process-logs" v-if="activeTab === 'logs'">
			<view class="list-header">
				<text class="list-title">处理日志记录</text>
				<text class="list-count">{{ processLogs.length }}条记录</text>
			</view>

			<!-- 日志记录列表 -->
			<view v-if="!logsLoading && processLogs.length > 0">
				<view class="log-item" v-for="log in processLogs" :key="log.id">
					<view class="log-header">
						<view class="log-student">
							<text class="student-name">{{ log.studentName }}</text>
							<text class="student-phone">{{ log.studentPhone }}</text>
						</view>
						<view class="log-time">{{ formatTime(log.processTime) }}</view>
					</view>
					<view class="log-content">
						<view class="log-details">
							<view class="detail-row">
								<text class="detail-label">充值金额:</text>
								<text class="detail-value amount">¥{{ log.rechargeAmount }}</text>
							</view>
							<view class="detail-row">
								<text class="detail-label">分配课时:</text>
								<text class="detail-value hours">{{ log.hoursAdded }}课时</text>
							</view>
							<view class="detail-row">
								<text class="detail-label">分配班级:</text>
								<text class="detail-value class">{{ log.className || '多班级分配' }}</text>
							</view>
							<view class="detail-row" v-if="log.processNotes">
								<text class="detail-label">处理说明:</text>
								<text class="detail-value notes">{{ log.processNotes }}</text>
							</view>
						</view>
						<view class="log-admin">
							<text class="admin-label">处理人:</text>
							<text class="admin-name">{{ log.adminName }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view v-else-if="logsLoading" class="loading-state">
				<view class="loading-icon">⏳</view>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 空状态 -->
			<view v-else class="empty-state">
				<view class="empty-icon">📋</view>
				<text class="empty-title">暂无处理记录</text>
				<text class="empty-desc">处理充值申请后将显示在此处</text>
			</view>
		</view>

		<!-- 处理充值弹窗 -->
		<view class="modal" v-if="showProcessModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">处理充值申请</text>
					<text class="modal-close" @click="closeProcessModal">×</text>
				</view>

				<view class="modal-body">
					<view class="student-summary">
						<text class="summary-title">学生信息</text>
						<view class="summary-item">
							<text class="summary-label">姓名:</text>
							<text class="summary-value">{{ currentRecharge.studentName }}</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">充值总金额:</text>
							<text class="summary-value amount">¥{{ currentRecharge.totalAmount }}</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">充值次数:</text>
							<text class="summary-value">{{ currentRecharge.recordCount }}次</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">最新申请时间:</text>
							<text class="summary-value">{{ formatTime(currentRecharge.latestTime) }}</text>
						</view>
					</view>

					<view class="recharge-details" v-if="currentRecharge.rechargeRecords && currentRecharge.rechargeRecords.length > 1">
						<text class="details-title">充值明细</text>
						<view class="detail-item" v-for="(record, index) in currentRecharge.rechargeRecords" :key="record.id">
							<view class="detail-header">
								<text class="detail-index">{{ index + 1 }}.</text>
								<text class="detail-amount">¥{{ record.amount }}</text>
								<text class="detail-time">{{ formatTime(record.rechargeTime) }}</text>
							</view>
							<text v-if="record.notes" class="detail-notes">{{ record.notes }}</text>
						</view>
					</view>

					<view class="process-form">
						<!-- 分配模式选择 -->
						<view class="form-item">
							<text class="form-label">分配模式</text>
							<view class="mode-selector">
								<view class="mode-option" :class="{ active: allocationMode === 'single' }" @click="setAllocationMode('single')">
									<text class="mode-text">单班级</text>
								</view>
								<view class="mode-option" :class="{ active: allocationMode === 'multi' }" @click="setAllocationMode('multi')">
									<text class="mode-text">多班级</text>
								</view>
							</view>
						</view>

						<!-- 单班级分配模式 -->
						<view v-if="allocationMode === 'single'">
							<view class="form-item">
								<text class="form-label">分配班级</text>
								<picker @change="onClassChange" :range="classList" range-key="className">
									<view class="picker-input">
										<text class="picker-text">{{ selectedClass.className || '请选择班级' }}</text>
										<text class="picker-arrow">▼</text>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<text class="form-label">分配课时</text>
								<view class="input-wrapper">
									<input class="form-input" v-model="processForm.hours" placeholder="请输入课时数" type="number" />
									<text class="input-unit">课时</text>
								</view>
							</view>
						</view>

						<!-- 多班级分配模式 -->
						<view v-if="allocationMode === 'multi'">
							<view class="multi-class-container">
								<view class="section-title-bar">
									<view class="title-icon">🎯</view>
									<view class="title-content">
										<text class="main-title">班级课时分配</text>
										<text class="sub-title">为每个班级手动分配课时数量</text>
									</view>
								</view>
								
								<view class="class-cards-grid">
									<view class="class-card" v-for="classItem in classList" :key="classItem.id">
										<view class="card-top">
											<view class="class-badge">
												<text class="badge-text">{{ classItem.className }}</text>
											</view>
										</view>
										<view class="card-center">
											<view class="hours-input-container">
												<input 
													class="hours-number-input" 
													v-model="multiClassHours[classItem.id]" 
													placeholder="0" 
													type="number"
													@input="calculateMultiClassTotal"
												/>
											</view>
											<text class="hours-label">课时</text>
										</view>
									</view>
								</view>
								
								<view class="total-summary-bar">
									<view class="summary-item">
										<view class="summary-icon total">📊</view>
										<view class="summary-info">
											<text class="summary-value">{{ totalMultiClassHours }}</text>
											<text class="summary-text">总课时</text>
										</view>
									</view>
									<view class="summary-divider"></view>
									<view class="summary-item">
										<view class="summary-icon money">💰</view>
										<view class="summary-info">
											<text class="summary-value highlight">¥{{ currentRecharge.totalAmount }}</text>
											<text class="summary-text">充值金额</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="form-item">
							<text class="form-label">处理说明</text>
							<textarea class="form-textarea" v-model="processForm.notes" placeholder="请输入处理说明（可选）" />
						</view>
					</view>
				</view>

				<view class="modal-footer">
					<button class="modal-btn cancel-btn" @click="closeProcessModal">取消</button>
					<button class="modal-btn confirm-btn" @click="confirmProcess">确认处理</button>
				</view>
			</view>
		</view>

		<!-- 充值详情弹窗 -->
		<view class="detail-modal" v-if="showDetailModal">
			<view class="detail-modal-content">
				<view class="detail-header">
					<view class="detail-title-section">
						<text class="detail-title">充值详情</text>
						<view class="detail-badge">
							<text class="badge-text">{{ currentDetailRecharge.recordCount }}次充值</text>
						</view>
					</view>
					<text class="detail-close" @click="closeDetailModal">×</text>
				</view>

				<view class="detail-body">
					<!-- 学生基本信息 -->
					<view class="detail-student-info">
						<view class="student-avatar-section">
							<view class="student-avatar-placeholder">
								<text class="avatar-text">{{ currentDetailRecharge.studentName ? currentDetailRecharge.studentName.charAt(0) : '学' }}</text>
							</view>
							<view class="student-basic">
								<text class="student-name-large">{{ currentDetailRecharge.studentName }}</text>
								<text class="student-phone-large">{{ currentDetailRecharge.studentPhone }}</text>
							</view>
						</view>
					</view>

					<!-- 充值总览 -->
					<view class="detail-overview">
						<view class="overview-item">
							<view class="overview-icon total-icon">
								<text class="icon-text">💰</text>
							</view>
							<view class="overview-content">
								<text class="overview-number">¥{{ currentDetailRecharge.totalAmount }}</text>
								<text class="overview-label">充值总金额</text>
							</view>
						</view>
						<view class="overview-item">
							<view class="overview-icon count-icon">
								<text class="icon-text">📊</text>
							</view>
							<view class="overview-content">
								<text class="overview-number">{{ currentDetailRecharge.recordCount }}</text>
								<text class="overview-label">充值次数</text>
							</view>
						</view>
						<view class="overview-item">
							<view class="overview-icon time-icon">
								<text class="icon-text">⏰</text>
							</view>
							<view class="overview-content">
								<text class="overview-number">{{ formatTime(currentDetailRecharge.latestTime, true) }}</text>
								<text class="overview-label">最新申请</text>
							</view>
						</view>
					</view>

					<!-- 充值记录列表 -->
					<view class="detail-records">
						<view class="records-title">
							<text class="title-text">充值记录明细</text>
							<view class="title-line"></view>
						</view>
						<view class="record-list">
							<view class="record-item" v-for="(record, index) in currentDetailRecharge.rechargeRecords" :key="record.id">
								<view class="record-header">
									<view class="record-index">
										<text class="index-number">{{ index + 1 }}</text>
									</view>
									<view class="record-main">
										<text class="record-amount">¥{{ record.amount }}</text>
										<text class="record-time">{{ formatTime(record.rechargeTime) }}</text>
									</view>
									<view class="record-status">
										<view class="status-dot pending"></view>
										<text class="status-text">待处理</text>
									</view>
								</view>
								<view v-if="record.notes" class="record-notes">
									<view class="notes-icon">💬</view>
									<text class="notes-text">{{ record.notes }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="detail-footer">
					<button class="detail-btn close-btn" @click="closeDetailModal">关闭</button>
					<button class="detail-btn process-btn" @click="processFromDetail">立即处理</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getApiUrl, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			pendingRecharges: [],
			loading: false,
			showProcessModal: false,
			currentRecharge: {},
			classList: [],
			selectedClass: {},
			processForm: {
				hours: '',
				notes: ''
			},
			showDetailModal: false,
			currentDetailRecharge: {},
			activeTab: 'pending', // 新增：控制当前激活的标签页
			processLogs: [], // 新增：处理日志列表
			logsLoading: false, // 新增：处理日志加载状态
			allocationMode: 'single', // 新增：分配模式 ('single' 或 'multi')
			multiClassHours: {}, // 新增：多班级课时分配
			totalMultiClassHours: 0, // 新增：多班级总课时
		}
	},
	computed: {
		totalPendingAmount() {
			return this.pendingRecharges.reduce((total, recharge) => {
				return total + parseFloat(recharge.totalAmount || 0)
			}, 0).toFixed(2)
		},
		totalProcessedAmount() {
			return this.processLogs.reduce((total, log) => {
				return total + parseFloat(log.rechargeAmount || 0)
			}, 0).toFixed(2)
		}
	},
	onLoad() {
		this.loadPendingRecharges()
		this.loadClassList()
	},
	onShow() {
		// 页面显示时刷新数据
		this.loadPendingRecharges()
	},
	methods: {
		async loadPendingRecharges() {
			this.loading = true
			try {
				const token = uni.getStorageSync('token')
				console.log('当前token:', token)
				
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}

				const response = await apiRequest({
					url: getApiUrl('/api/lesson/admin/getStudentRechargeList'),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (response.code === 200) {
					const rawRecharges = response.data || []
					
					// 为每个充值记录获取学生信息
					for (let recharge of rawRecharges) {
						await this.loadStudentInfo(recharge)
					}
					
					// 按学生ID分组合并充值记录
					this.pendingRecharges = this.groupRechargesByStudent(rawRecharges)
					
					console.log('待处理充值列表:', this.pendingRecharges)
				} else {
					uni.showToast({
						title: response.message || '加载失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载待处理充值失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 按学生分组合并充值记录
		groupRechargesByStudent(recharges) {
			const studentGroups = {}
			
			// 按学生ID分组
			recharges.forEach(recharge => {
				const userId = recharge.userId
				if (!studentGroups[userId]) {
					studentGroups[userId] = {
						userId: userId,
						studentName: recharge.studentName,
						studentPhone: recharge.studentPhone,
						rechargeRecords: [],
						totalAmount: 0,
						recordCount: 0,
						latestTime: null,
						allNotes: []
					}
				}
				
				studentGroups[userId].rechargeRecords.push(recharge)
				studentGroups[userId].totalAmount += parseFloat(recharge.amount || 0)
				studentGroups[userId].recordCount += 1
				
				// 获取最新的充值时间
				const rechargeTime = new Date(recharge.rechargeTime)
				if (!studentGroups[userId].latestTime || rechargeTime > studentGroups[userId].latestTime) {
					studentGroups[userId].latestTime = rechargeTime
				}
				
				// 收集所有备注
				if (recharge.notes) {
					studentGroups[userId].allNotes.push(recharge.notes)
				}
			})
			
			// 转换为数组并排序（按最新充值时间倒序）
			return Object.values(studentGroups).sort((a, b) => b.latestTime - a.latestTime)
		},

		async loadStudentInfo(recharge) {
			try {
				const token = uni.getStorageSync('token')
				const response = await apiRequest({
					url: getApiUrl(`/api/lesson/admin/getUserById?userId=${recharge.userId}`),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (response.code === 200) {
					const student = response.data
					if (student) {
						recharge.studentName = student.name
						recharge.studentPhone = student.phone
					}
				}
			} catch (error) {
				console.error('获取学生信息失败:', error)
			}
		},

		async loadClassList() {
			try {
				const response = await apiRequest({
					url: getApiUrl('/api/student-class-hours/classes'),
					method: 'GET'
				})

				if (response.code === 200) {
					this.classList = response.data || []
					console.log('班级列表加载成功:', this.classList)
					
					// 初始化多班级课时分配对象
					this.multiClassHours = {}
					this.classList.forEach(classItem => {
						this.$set(this.multiClassHours, classItem.id, '0')
					})
					console.log('多班级课时初始化:', this.multiClassHours)
				}
			} catch (error) {
				console.error('获取班级列表失败:', error)
			}
		},

		processRecharge(recharge) {
			this.currentRecharge = recharge
			this.processForm = {
				hours: '',
				notes: `处理${recharge.studentName}的¥${recharge.totalAmount}充值申请`
			}
			this.selectedClass = {}
			this.allocationMode = 'single' // 默认单班级模式
			
			// 初始化多班级课时分配
			this.multiClassHours = {}
			this.classList.forEach(classItem => {
				this.$set(this.multiClassHours, classItem.id, '0')
			})
			this.totalMultiClassHours = 0
			console.log('处理充值初始化多班级课时:', this.multiClassHours)
			
			this.showProcessModal = true
		},

		async confirmProcess() {
			if (this.allocationMode === 'single') {
				// 单班级分配模式验证
				if (!this.processForm.hours) {
					uni.showToast({
						title: '请输入课时数',
						icon: 'none'
					})
					return
				}

				if (!this.selectedClass.id) {
					uni.showToast({
						title: '请选择班级',
						icon: 'none'
					})
					return
				}
			} else if (this.allocationMode === 'multi') {
				// 多班级分配模式验证
				const hasAllocatedHours = Object.values(this.multiClassHours).some(h => parseInt(h) > 0)
				if (!hasAllocatedHours) {
					uni.showToast({
						title: '请至少为一个班级分配课时',
						icon: 'none'
					})
					return
				}
			}

			uni.showLoading({
				title: '处理中...'
			})

			try {
				const token = uni.getStorageSync('token')
				
				if (this.allocationMode === 'single') {
					// 单班级分配模式 - 使用原有逻辑
					// 1. 处理该学生的所有充值记录，标记为已处理并记录处理日志
					await apiRequest({
						url: getApiUrl(`/api/lesson/admin/handleStudentRecharge?userId=${this.currentRecharge.userId}&hoursAdded=${this.processForm.hours}&classId=${this.selectedClass.id || ''}&processNotes=${encodeURIComponent(this.processForm.notes || '')}`),
						method: 'PUT',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${token}`
						}
					})

					// 2. 为学生分配课时
					await apiRequest({
						url: getApiUrl('/api/lesson/admin/adjust'),
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${token}`
						},
						data: {
							studentId: this.currentRecharge.userId,
							classId: this.selectedClass.id,
							changeValue: parseInt(this.processForm.hours),
							title: '充值增加课时',
							description: this.processForm.notes || `充值¥${this.currentRecharge.totalAmount}，增加${this.processForm.hours}课时`
						}
					})
				} else {
					// 多班级分配模式 - 使用新的API
					console.log('开始多班级分配处理')
					console.log('当前multiClassHours:', this.multiClassHours)
					console.log('当前充值信息:', this.currentRecharge)
					
					// 过滤掉0值的课时分配
					const filteredClassHours = {}
					Object.entries(this.multiClassHours).forEach(([classId, hours]) => {
						const hoursNum = parseInt(hours) || 0
						if (hoursNum > 0) {
							filteredClassHours[classId] = hoursNum
						}
					})
					console.log('过滤后的课时分配:', filteredClassHours)
					
					// 1. 处理充值记录并分配多班级课时
					const requestData = {
						userId: this.currentRecharge.userId,
						classHours: filteredClassHours,
						processNotes: this.processForm.notes || `多班级充值处理：¥${this.currentRecharge.totalAmount}`
					}
					console.log('发送的请求数据:', requestData)
					
					const response = await apiRequest({
						url: getApiUrl('/api/lesson/admin/handleStudentRechargeMultiClass'),
						method: 'PUT',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${token}`
						},
						data: requestData
					})
					
					console.log('多班级分配API响应:', response)
					
					if (response.code !== 200) {
						throw new Error(response.message || '处理失败')
					}
				}

				uni.hideLoading()
				uni.showToast({
					title: '处理成功',
					icon: 'success'
				})

				this.closeProcessModal()
				this.loadPendingRecharges() // 刷新待处理列表
				
				// 如果当前在处理日志页面，也刷新处理日志
				if (this.activeTab === 'logs') {
					this.loadProcessLogs()
				}
			} catch (error) {
				uni.hideLoading()
				console.error('处理充值失败:', error)
				uni.showToast({
					title: '处理失败，请重试',
					icon: 'none'
				})
			}
		},

		onClassChange(e) {
			const index = e.detail.value
			this.selectedClass = this.classList[index]
		},

		setAllocationMode(mode) {
			this.allocationMode = mode
			// 切换模式时重新初始化多班级课时分配
			this.multiClassHours = {}
			this.classList.forEach(classItem => {
				this.$set(this.multiClassHours, classItem.id, '0')
			})
			this.totalMultiClassHours = 0
			console.log('切换分配模式，重新初始化:', mode, this.multiClassHours)
		},

		calculateMultiClassTotal() {
			let totalHours = 0
			
			Object.values(this.multiClassHours).forEach(hours => {
				const hoursNum = parseInt(hours) || 0
				totalHours += hoursNum
			})
			
			this.totalMultiClassHours = totalHours
		},

		closeProcessModal() {
			this.showProcessModal = false
			this.currentRecharge = {}
		},

		viewRechargeDetail(recharge) {
			this.currentDetailRecharge = recharge
			this.showDetailModal = true
		},

		closeDetailModal() {
			this.showDetailModal = false
			this.currentDetailRecharge = {}
		},

		processFromDetail() {
			this.currentRecharge = this.currentDetailRecharge
			this.processForm = {
				hours: '',
				notes: `处理${this.currentRecharge.studentName}的¥${this.currentRecharge.totalAmount}充值申请`
			}
			this.selectedClass = {}
			this.allocationMode = 'single' // 默认单班级模式
			
			// 初始化多班级课时分配
			this.multiClassHours = {}
			this.classList.forEach(classItem => {
				this.$set(this.multiClassHours, classItem.id, '0')
			})
			this.totalMultiClassHours = 0
			
			this.showProcessModal = true
			this.closeDetailModal()
		},

		formatTime(timeString, isShort = false) {
			if (!timeString) return ''
			const date = new Date(timeString)
			if (isShort) {
				return date.toLocaleDateString('zh-CN', {
					month: '2-digit',
					day: '2-digit'
				})
			}
			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit'
			})
		},

		async refreshData() {
			uni.showLoading({
				title: '刷新中...'
			})
			try {
				if (this.activeTab === 'pending') {
					await this.loadPendingRecharges()
				} else if (this.activeTab === 'logs') {
					await this.loadProcessLogs()
				}
				uni.hideLoading()
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			} catch (error) {
				console.error('刷新失败:', error)
				uni.hideLoading()
				uni.showToast({
					title: '刷新失败',
					icon: 'none'
				})
			}
		},

		goBack() {
			uni.navigateBack()
		},

		switchTab(tab) {
			this.activeTab = tab
			if (tab === 'pending') {
				this.loadPendingRecharges()
			} else if (tab === 'logs') {
				this.loadProcessLogs()
			}
		},

		// 新增：加载处理日志
		async loadProcessLogs() {
			this.logsLoading = true
			try {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}

				const response = await apiRequest({
					url: getApiUrl('/api/lesson/admin/getRechargeProcessLogs'),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (response.code === 200) {
					this.processLogs = response.data || []
					console.log('处理日志加载成功:', this.processLogs)
				} else {
					console.log('获取处理日志失败:', response.message)
					this.processLogs = []
					uni.showToast({
						title: response.message || '获取处理日志失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载处理日志失败:', error)
				this.processLogs = []
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.logsLoading = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
	padding-bottom: 40rpx;
}

.page-header {
	padding: 40rpx 30rpx 30rpx;
	background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
	
	.header-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
		
		.back-btn, .refresh-btn {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: bold;
		}
		
		.page-title {
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: bold;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	}
	
	.page-subtitle {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
	}
}

.tab-container {
	display: flex;
	justify-content: space-around;
	padding: 20rpx 30rpx;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
	border-bottom: 1rpx solid #2a2f3e;
	margin-bottom: 20rpx;
}

.tab-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	border: 1rpx solid #2a2f3e;
	background: rgba(255, 255, 255, 0.05);
	transition: all 0.3s ease;
}

.tab-item.active {
	border-color: #00B8D4;
	background: rgba(0, 184, 212, 0.1);
	box-shadow: 0 0 0 2rpx rgba(0, 184, 212, 0.2);
}

.tab-text {
	font-size: 28rpx;
	color: #FFFFFF;
	font-weight: 500;
}

.tab-badge {
	background: linear-gradient(135deg, #FF9800 0%, #F44336 100%);
	padding: 4rpx 10rpx;
	border-radius: 15rpx;
	margin-left: 10rpx;
}

.tab-badge .badge-text {
	font-size: 22rpx;
	color: #FFFFFF;
	font-weight: bold;
}

.stats-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	margin: 20rpx;
	
	.stat-card {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid #2a2f3e;
		
		.stat-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			
			&.pending-icon {
				background: linear-gradient(135deg, #FF9800 0%, #F44336 100%);
				box-shadow: 0 8rpx 24rpx rgba(255, 152, 0, 0.3);
			}
			
			&.amount-icon {
				background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
				box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
			}
			
			&.logs-icon {
				background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
				box-shadow: 0 8rpx 24rpx rgba(0, 184, 212, 0.3);
			}
			
			&.total-icon {
				background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
				box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
			}
			
			.icon-text {
				font-size: 32rpx;
			}
		}
		
		.stat-content {
			.stat-number {
				display: block;
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
			
			.stat-label {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
	}
}

.recharge-list {
	margin: 20rpx;
	
	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.list-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
		
		.list-count {
			font-size: 24rpx;
			color: #AAB4BE;
		}
	}
	
	.recharge-item {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #2a2f3e;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.recharge-info {
			flex: 1;
			margin-right: 20rpx;
			
			.student-info {
				.student-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 12rpx;
					
					.student-name {
						font-size: 32rpx;
						color: #FFFFFF;
						font-weight: bold;
					}
					
					.amount-badge {
						background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
						padding: 8rpx 16rpx;
						border-radius: 20rpx;
						
						.amount-text {
							font-size: 24rpx;
							color: #FFFFFF;
							font-weight: bold;
						}
					}
				}
				
				.student-phone {
					font-size: 26rpx;
					color: #AAB4BE;
					margin-bottom: 8rpx;
				}
				
				.recharge-time {
					font-size: 24rpx;
					color: #AAB4BE;
					margin-bottom: 8rpx;
				}
				
				.recharge-count {
					font-size: 24rpx;
					color: #AAB4BE;
					margin-bottom: 8rpx;
				}
				
				.recharge-notes {
					font-size: 24rpx;
					color: #00B8D4;
					font-style: italic;
				}
			}
		}
		
		.recharge-actions {
			display: flex;
			gap: 10rpx;
			
			.action-btn {
				padding: 16rpx 24rpx;
				border-radius: 12rpx;
				border: none;
				font-size: 26rpx;
				font-weight: 500;
				transition: all 0.3s ease;
				
				&.process-btn {
					background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
					color: #FFFFFF;
					box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.3);
				}
				
				&.detail-btn {
					background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
					color: #FFFFFF;
					box-shadow: 0 6rpx 20rpx rgba(0, 184, 212, 0.3);
				}
				
				&:active {
					transform: scale(0.95);
				}
			}
		}
	}
	
	.loading-state, .empty-state {
		text-align: center;
		padding: 80rpx 40rpx;
		
		.loading-icon, .empty-icon {
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}
		
		.loading-text, .empty-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 12rpx;
		}
		
		.empty-desc {
			font-size: 26rpx;
			color: #AAB4BE;
		}
	}
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
	
	.modal-content {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 20rpx;
		width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
		border: 1rpx solid #2a2f3e;
		animation: slideInUp 0.4s ease-out;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
		
		.modal-header {
			padding: 30rpx;
			border-bottom: 1rpx solid #2a2f3e;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.modal-title {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
			
			.modal-close {
				font-size: 40rpx;
				color: #AAB4BE;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.modal-body {
			padding: 30rpx;
			max-height: 60vh;
			overflow-y: auto;
			
			.student-summary {
				background: rgba(0, 184, 212, 0.1);
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;
				border: 1rpx solid rgba(0, 184, 212, 0.3);
				
				.summary-title {
					font-size: 28rpx;
					color: #00B8D4;
					font-weight: bold;
					margin-bottom: 16rpx;
				}
				
				.summary-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 12rpx;
					
					.summary-label {
						font-size: 26rpx;
						color: #AAB4BE;
					}
					
					.summary-value {
						font-size: 26rpx;
						color: #FFFFFF;
						
						&.amount {
							color: #4CAF50;
							font-weight: bold;
						}
					}
				}
			}

			.recharge-details {
				background: rgba(255, 255, 255, 0.05);
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.1);

				.details-title {
					font-size: 28rpx;
					color: #00B8D4;
					font-weight: bold;
					margin-bottom: 16rpx;
					text-align: center;
				}

				.detail-item {
					padding: 15rpx 0;
					border-bottom: 1rpx dashed rgba(255, 255, 255, 0.1);

					&:last-child {
						border-bottom: none;
					}

					.detail-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8rpx;

						.detail-index {
							font-size: 24rpx;
							color: #AAB4BE;
							font-weight: 500;
						}

						.detail-amount {
							font-size: 26rpx;
							color: #4CAF50;
							font-weight: bold;
						}

						.detail-time {
							font-size: 24rpx;
							color: #AAB4BE;
						}
					}

					.detail-notes {
						font-size: 24rpx;
						color: #00B8D4;
						font-style: italic;
						margin-top: 8rpx;
					}
				}
			}
			
			.process-form {
				background: rgba(255, 255, 255, 0.05);
				border-radius: 16rpx;
				padding: 24rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.1);
				
				.form-item {
					margin-bottom: 30rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.form-label {
						display: block;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-bottom: 12rpx;
						font-weight: 500;
						position: relative;
						padding-left: 12rpx;
					}
					
					.form-label::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 4rpx;
						height: 20rpx;
						background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
						border-radius: 2rpx;
					}
					
					.mode-selector {
						display: flex;
						gap: 20rpx;
						margin-bottom: 20rpx;
					}

					.mode-option {
						flex: 1;
						padding: 16rpx 20rpx;
						border-radius: 12rpx;
						border: 1rpx solid #2a2f3e;
						background: rgba(255, 255, 255, 0.05);
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.3s ease;

						&.active {
							border-color: #00B8D4;
							background: rgba(0, 184, 212, 0.1);
							box-shadow: 0 0 0 2rpx rgba(0, 184, 212, 0.2);
						}
					}

					.mode-text {
						font-size: 26rpx;
						color: #FFFFFF;
						font-weight: 500;
					}

					
					.picker-input {
						background: rgba(255, 255, 255, 0.1);
						border: 1rpx solid #2a2f3e;
						border-radius: 12rpx;
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						transition: all 0.3s ease;
						height: 80rpx;
						box-sizing: border-box;
					}
					
					.picker-input:active {
						border-color: #00B8D4;
						background: rgba(0, 184, 212, 0.1);
						box-shadow: 0 0 0 2rpx rgba(0, 184, 212, 0.2);
					}
					
					.picker-text {
						font-size: 26rpx;
						color: #FFFFFF;
						flex: 1;
					}
					
					.picker-arrow {
						font-size: 24rpx;
						color: #AAB4BE;
						transition: color 0.3s ease;
					}
					
					.picker-input:active .picker-arrow {
						color: #00B8D4;
					}
					
					.input-wrapper {
						position: relative;
						display: flex;
						align-items: center;
						background: rgba(255, 255, 255, 0.1);
						border: 1rpx solid #2a2f3e;
						border-radius: 12rpx;
						padding: 20rpx;
						box-sizing: border-box;
						transition: all 0.3s ease;
						height: 80rpx;
					}

					.input-wrapper:focus-within {
						border-color: #00B8D4;
						background: rgba(0, 184, 212, 0.1);
						box-shadow: 0 0 0 2rpx rgba(0, 184, 212, 0.2);
					}

					.input-wrapper .form-input {
						flex: 1;
						background: transparent;
						border: none;
						padding: 0;
						color: #FFFFFF;
						font-size: 26rpx;
						outline: none;
						height: 100%;
					}

					.input-wrapper .form-input::placeholder {
						color: #AAB4BE;
						opacity: 0.8;
					}

					.input-wrapper .input-unit {
						font-size: 26rpx;
						color: #AAB4BE;
						margin-left: 10rpx;
						white-space: nowrap;
					}
					
					.form-textarea {
						background: rgba(255, 255, 255, 0.1);
						border: 1rpx solid #2a2f3e;
						border-radius: 12rpx;
						padding: 20rpx;
						color: #FFFFFF;
						font-size: 26rpx;
						width: 100%;
						box-sizing: border-box;
						transition: all 0.3s ease;
						height: 120rpx;
						resize: none;
						line-height: 1.4;
						padding-top: 20rpx;
					}
					
					.form-textarea:focus {
						border-color: #00B8D4;
						background: rgba(0, 184, 212, 0.1);
						box-shadow: 0 0 0 2rpx rgba(0, 184, 212, 0.2);
						outline: none;
					}
					
					.form-textarea::placeholder {
						color: #AAB4BE;
						opacity: 0.8;
					}
				}
			}
		}
		
		.modal-footer {
			padding: 30rpx;
			border-top: 1rpx solid #2a2f3e;
			display: flex;
			gap: 20rpx;
			
			.modal-btn {
				flex: 1;
				padding: 24rpx;
				border-radius: 12rpx;
				border: none;
				font-size: 28rpx;
				font-weight: 500;
				
				&.cancel-btn {
					background: #5A5F6B;
					color: #FFFFFF;
				}
				
				&.confirm-btn {
					background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
					color: #FFFFFF;
					box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.3);
				}
			}
		}
	}
}

.detail-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
	
	.detail-modal-content {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 20rpx;
		width: 90%;
		max-width: 800rpx;
		max-height: 90vh;
		overflow: hidden;
		border: 1rpx solid #2a2f3e;
		display: flex;
		flex-direction: column;
		animation: slideInUp 0.4s ease-out;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
		
		.detail-header {
			padding: 30rpx;
			border-bottom: 1rpx solid #2a2f3e;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.detail-title-section {
				display: flex;
				align-items: center;
				
				.detail-title {
					font-size: 36rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin-right: 10rpx;
				}
				
				.detail-badge {
					background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					
					.badge-text {
						font-size: 24rpx;
						color: #FFFFFF;
						font-weight: bold;
					}
				}
			}
			
			.detail-close {
				font-size: 40rpx;
				color: #AAB4BE;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.detail-body {
			flex: 1;
			padding: 30rpx;
			overflow-y: auto;
			
			.detail-student-info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 20rpx;
				background: rgba(0, 184, 212, 0.1);
				border-radius: 16rpx;
				border: 1rpx solid rgba(0, 184, 212, 0.3);
				
				.student-avatar-section {
					display: flex;
					align-items: center;
					width: 100%;
					
					.student-avatar-placeholder {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 4rpx 12rpx rgba(0, 184, 212, 0.3);
						margin-right: 20rpx;
						flex-shrink: 0;
						
						.avatar-text {
							font-size: 48rpx;
							color: #FFFFFF;
							font-weight: bold;
						}
					}
					
					.student-basic {
						flex: 1;
						
						.student-name-large {
							display: block;
							font-size: 36rpx;
							color: #FFFFFF;
							font-weight: bold;
							margin-bottom: 8rpx;
						}
						
						.student-phone-large {
							display: block;
							font-size: 28rpx;
							color: #AAB4BE;
						}
					}
				}
			}
			
			.detail-overview {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;
				margin-bottom: 30rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx dashed rgba(255, 255, 255, 0.1);
				
				.overview-item {
					text-align: center;
					
					.overview-icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 10rpx;
						
						&.total-icon {
							background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
							box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
						}
						
						&.count-icon {
							background: linear-gradient(135deg, #FF9800 0%, #F44336 100%);
							box-shadow: 0 8rpx 24rpx rgba(255, 152, 0, 0.3);
						}
						
						&.time-icon {
							background: linear-gradient(135deg, #9C27B0 0%, #AB47BC 100%);
							box-shadow: 0 8rpx 24rpx rgba(156, 39, 176, 0.3);
						}
						
						.icon-text {
							font-size: 36rpx;
						}
					}
					
					.overview-content {
						.overview-number {
							font-size: 32rpx;
							color: #FFFFFF;
							font-weight: bold;
							margin-bottom: 8rpx;
						}
						
						.overview-label {
							font-size: 24rpx;
							color: #AAB4BE;
						}
					}
				}
			}
			
			.detail-records {
				.records-title {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.title-text {
						font-size: 28rpx;
						color: #00B8D4;
						font-weight: bold;
					}
					
					.title-line {
						flex: 1;
						height: 1rpx;
						background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
						margin: 0 10rpx;
					}
				}
				
				.record-list {
					.record-item {
						background: rgba(255, 255, 255, 0.05);
						border-radius: 16rpx;
						padding: 20rpx;
						margin-bottom: 15rpx;
						border: 1rpx solid rgba(255, 255, 255, 0.1);
						
						.record-header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 10rpx;
							
							.record-index {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 24rpx;
								color: #FFFFFF;
								font-weight: bold;
								margin-right: 15rpx;
							}
							
							.record-main {
								flex: 1;
								display: flex;
								justify-content: space-between;
								align-items: center;
								
								.record-amount {
									font-size: 28rpx;
									color: #4CAF50;
									font-weight: bold;
								}
								
								.record-time {
									font-size: 24rpx;
									color: #AAB4BE;
								}
							}
							
							.record-status {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								color: #FF9800;
								
								.status-dot {
									width: 12rpx;
									height: 12rpx;
									border-radius: 50%;
									margin-right: 8rpx;
									
									&.pending {
										background: #FF9800;
									}
								}
							}
						}
						
						.record-notes {
							margin-top: 15rpx;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #00B8D4;
							font-style: italic;
							
							.notes-icon {
								font-size: 28rpx;
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}
		
		.detail-footer {
			padding: 30rpx;
			border-top: 1rpx solid #2a2f3e;
			display: flex;
			gap: 20rpx;
			
			.detail-btn {
				flex: 1;
				padding: 24rpx;
				border-radius: 12rpx;
				border: none;
				font-size: 28rpx;
				font-weight: 500;
				
				&.close-btn {
					background: #5A5F6B;
					color: #FFFFFF;
				}
				
				&.process-btn {
					background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
					color: #FFFFFF;
					box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.3);
				}
			}
		}
	}
}

/* 处理日志样式 */
.process-logs {
	margin: 20rpx;
	
	.log-item {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #2a2f3e;
		transition: all 0.3s ease;
		
		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
		}
		
		.log-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20rpx;
			padding-bottom: 15rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
			
			.log-student {
				.student-name {
					display: block;
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				
				.student-phone {
					font-size: 24rpx;
					color: #AAB4BE;
				}
			}
			
			.log-time {
				font-size: 22rpx;
				color: #AAB4BE;
				background: rgba(255, 255, 255, 0.05);
				padding: 8rpx 12rpx;
				border-radius: 8rpx;
			}
		}
		
		.log-content {
			.log-details {
				margin-bottom: 20rpx;
				
				.detail-row {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.detail-label {
						font-size: 26rpx;
						color: #AAB4BE;
						width: 140rpx;
						flex-shrink: 0;
					}
					
					.detail-value {
						font-size: 26rpx;
						color: #FFFFFF;
						font-weight: 500;
						
						&.amount {
							color: #4CAF50;
							font-weight: bold;
						}
						
						&.hours {
							color: #00B8D4;
							font-weight: bold;
						}
						
						&.class {
							color: #FF9800;
						}
						
						&.notes {
							color: #E91E63;
							font-style: italic;
						}
					}
				}
			}
			
			.log-admin {
				display: flex;
				align-items: center;
				padding-top: 15rpx;
				border-top: 1rpx solid rgba(255, 255, 255, 0.1);
				
				.admin-label {
					font-size: 24rpx;
					color: #AAB4BE;
					margin-right: 10rpx;
				}
				
				.admin-name {
					font-size: 24rpx;
					color: #00B8D4;
					font-weight: 500;
					background: rgba(0, 184, 212, 0.1);
					padding: 6rpx 12rpx;
					border-radius: 8rpx;
					border: 1rpx solid rgba(0, 184, 212, 0.2);
				}
			}
		}
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideInUp {
	from {
		transform: translateY(50px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 多班级分配样式 */
.multi-class-container {
	margin-top: 20rpx;
	padding: 24rpx;
	background: linear-gradient(135deg, rgba(0, 184, 212, 0.05) 0%, rgba(25, 118, 210, 0.05) 100%);
	border-radius: 16rpx;
	border: 1rpx solid rgba(0, 184, 212, 0.2);
}

.section-title-bar {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.title-icon {
	font-size: 36rpx;
	margin-right: 12rpx;
}

.title-content .main-title {
	font-size: 30rpx;
	color: #FFFFFF;
	font-weight: bold;
	margin-bottom: 4rpx;
}

.title-content .sub-title {
	font-size: 24rpx;
	color: #AAB4BE;
}

.class-cards-grid {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-bottom: 24rpx;
}

.class-card {
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
	border-radius: 16rpx;
	padding: 20rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.class-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(90deg, #00B8D4 0%, #1976D2 100%);
}

.card-top {
	flex: 1;
}

.class-badge {
	display: inline-block;
	background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
	color: #FFFFFF;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 12rpx rgba(0, 184, 212, 0.3);
}

.badge-text {
	color: #FFFFFF;
}

.card-center {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.hours-input-container {
	background: rgba(255, 255, 255, 0.08);
	border: 2rpx solid rgba(255, 255, 255, 0.1);
	border-radius: 12rpx;
	padding: 16rpx;
	transition: all 0.3s ease;
	width: 120rpx;
}

.hours-input-container:focus-within {
	border-color: #00B8D4;
	background: rgba(0, 184, 212, 0.1);
	box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.1);
}

.hours-number-input {
	width: 100%;
	background: transparent;
	border: none;
	color: #FFFFFF;
	font-size: 28rpx;
	font-weight: bold;
	text-align: center;
	outline: none;
}

.hours-number-input::placeholder {
	color: #AAB4BE;
	opacity: 0.6;
}

.hours-label {
	font-size: 22rpx;
	color: #AAB4BE;
	font-weight: 500;
}

.total-summary-bar {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
	border-radius: 16rpx;
	padding: 20rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.summary-item {
	display: flex;
	align-items: center;
	flex: 1;
}

.summary-icon {
	font-size: 36rpx;
	margin-right: 12rpx;
}

.summary-icon.total {
	color: #4CAF50;
}

.summary-icon.money {
	color: #FF9800;
}

.summary-value {
	font-size: 32rpx;
	color: #FFFFFF;
	font-weight: bold;
	margin-bottom: 4rpx;
}

.summary-value.highlight {
	color: #FF9800;
}

.summary-text {
	font-size: 22rpx;
	color: #AAB4BE;
}

.summary-divider {
	width: 2rpx;
	height: 60rpx;
	background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
	margin: 0 20rpx;
}
</style> 